<template>
  <div id="fresh">
      <comment-header>新鲜事</comment-header>
    <div v-for="(item,index) in contentList" :key="index" class="content">
      <div class="title">
        <div class="title-left">
          <img :src="item.admin.avatar" alt>
          <div>{{item.admin.name}}</div>
        </div>
        <div class="title-right">
          <span>{{item.article_tags}}</span>
        </div>
      </div>
      <div class="messageOne" v-if="item.picture3 == ''">
        <div class="messageOne-left">
          <h3>{{item.title}}</h3>
          <div>{{item.seo_description}}</div>
        </div>
        <div>
          <img :src="item.picture1" class="messageOne-img">
        </div>
      </div>
      <div v-if="item.picture3 != ''" class="messageTwo">
          <h3>{{item.title}}</h3>
          <div class="messageTwo-img">
              <img :src="item.picture1" alt="">
              <img :src="item.picture2" alt="">
              <img :src="item.picture3" alt="">
          </div>
          <div class="messageTwo-bottom">{{item.seo_description}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import commentHeader from "../../components/comment/commentHeader"

export default {
  components:{
    commentHeader     
  },
  data() {
    return {
      contentList: [],
      page: 1,
      loadingMore:false
    };
  },
  mounted() {
    this.freshContent();
    window.onscroll = this.didscroll;
  },
  methods: {
    freshContent: function() {
      var that = this;
      this.$http
        .get("/pet/v2/articlelist?page=" + this.page + "&tag_id=1")
        .then(function(data) {
          that.contentList = data.body.data.list;
        });
    },
    didscroll(){
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop
        var contentHeight = document.body.clientHeight
        var windowHeight = window.innerHeight
        if(scrollTop + windowHeight > contentHeight){
            if(this.loadingMore == false){
                this.loadMore();
                console.log('111')
            }
        }
    },
    loadMore(){
        this.loadingMore = true
        this.page += 1
        var that = this
        var url = "/pet/v2/articlelist?page=" + this.page + "&tag_id=1"
        this.$http.get(url).then(function(data){
            that.contentList = that.contentList.concat(data.body.data.list)
            that.loadingMore = false
        })
    },
    
  }
};
</script>

<style>
#fresh{
    background-color: white;
}
.content {
  width: 90vw;
  margin: 5vw auto;
  border-bottom: 1px solid gray;
}
.title {
  display: flex;
  justify-content: space-between;
}
.title-left {
  display: flex;
}
.title-left > img {
  width: 8vw;
  height: 8vw;
  border-radius: 50%;
  display: inline-block;
}
.title-left > div {
  font-size: 3.5vw;
  font-weight: 200;
  margin-left: 3vw;
}
.title-right > span {
  border-right: 2px solid black;
  display: inline-block;
  height: 5vw;
  font-size: 3vw;
  line-height: 3.5vw;
  padding-right: 2vw;
  line-height: 5vw;
  font-weight: 100;
}
.messageOne{
    margin: 3vw 0 0 0;
    display: flex;
    justify-content: space-between;
    margin-bottom: 3vw;
}
.messageOne-img{
    width: 30vw;
    height: 23vw;
    padding: 0 0 0 3vw;
}
.messageOne-left.messageOne-left{
    width: 60vw;
}
.messageOne-left>h3{
    font-size: 5vw;
    margin: 0;
    text-align: left;
}
.messageOne-left>div{
    text-align: left;
    font-size: 4vw;
    width: 60vw;
    max-width: 60vw;
    text-overflow: ellipsis;
    overflow: hidden;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}
.messageTwo>h3{
    font-size: 5vw;
    margin: 0;
    text-align: left;
}
.messageTwo-img{
    margin-top: 3vw;
    margin-bottom: 3vw;
    display: flex;
    justify-content: space-between;
}
.messageTwo-img>img{
    width: 28vw;
    height: 18vw;
}
.messageTwo-bottom{
    margin-bottom: 3vw;
    text-align: left;
    font-size: 4vw;
    width: 90vw;
    max-width: 90vw;
    text-overflow: ellipsis;
    overflow: hidden;
    display:-webkit-box; 
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2; 
}
</style>
